<!--
* @description  
* @fileName  5_一个重要的内置关系
* @author zhoujunlin
* @date 2022-04-18 20:58:09
* @version V1.0.0
!-->

<!--
1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

Vue构造函数:
Vue构造函数的prototype是Vue的原型对象

vm（Vue构造函数构造的实例对象）：
vm对象的原型等于其构造函数的prototype，即是Vue的prototype,即指向Vue的原型对象：vm.__proto__===Vue.prototype

Vue的原型对象的原型：
即Vue.prototype.__proto__等于其构造函数的prototype：Vue.prototype.__proto__===Object.prototype

VueComponent构造函数：
VueComponent构造函数的prototype是VueComponent的原型对象

vc（VueComponent构造函数构造的实例对象）：
vc对象的原型等于其构造函数的prototype，即是VueComponent的prototype,即指向VueComponent的原型对象：
this.__proto__ === VueComponent.prototype

最后，强行改变VueComponent原型对象的.__proto__指向，让其指向从Object原型对象到Vue的原型对象
VueComponent.prototype.__proto__ === Vue.prototype

-->

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>5_一个重要的内置关系</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <school></school>
    </div>

    <script>
        Vue.config.productionTip = false
        Vue.prototype.x = 99

        //定义school组件
        // 这里的school是VueComponets构造函数 在使用<school></school>时Vue帮你new出实例对象vc 即该组件的this
        const school = Vue.extend({
            name: 'school',
            template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showX">点我输出X</button>
				</div>
			`,
            data() {
                return {
                    name: '尚硅谷',
                    address: '北京'
                }
            },
            methods: {
                showX() {
                    // VueComponets原型对象可以访问Vue原型上的x属性
                    console.log('showX:', this.x)
                }
            },
        })

        console.log(school.prototype.__proto__ === Vue.prototype)
        console.dir(school)

        var vm = new Vue({
            el: '#app',
            components: {
                school
            }
        });

        // 定义一个构造函数  演示原型对象
        /* function Demo() {
            this.a = 1
            this.b = 2
        }
        // 创建一个Demo的实例对象
        const d = new Demo();
        // 显式原型属性 只有函数拥有
        console.log(Demo.prototype);
        // 这两个原型属性的地址都指向原型对象
        // 隐式原型属性  对象拥有
        console.log(d.__proto__);
        console.log(Demo.prototype === d.__proto__);

        //程序员通过显式原型属性操作原型对象 追加一个x属性
        Demo.prototype.x = 99
        console.log("输出：", d.__proto__.x);
        console.log('@', d); */
    </script>
</body>

</html>